<!-- 基于vant 的 image 组件二次封装 -->
<script lang="ts" setup>
  import { ImageFit } from 'vant';

  defineProps<{
    src?: string | null;
    alt?: string;
    fit?: ImageFit;
    position?: string;
    round?: boolean;
    block?: boolean;
    width?: number | string;
    height?: number | string;
    radius?: number | string;
    loadingSize?: number;
  }>();

  const emits = defineEmits(['click']);

  const onClick = (e: Event) => {
    emits('click', e);
  };
</script>
<template>
  <VanImage
    :width="width ?? '100%'"
    :height="height ?? '100%'"
    lazy-load
    :src="src ?? $img('common/default-img.png')"
    :fit="fit ?? 'cover'"
    :radius="radius"
    :round="round"
    :alt="alt"
    :block="block"
    :position="position"
    @click="onClick"
  >
    <template #loading>
      <van-loading type="spinner" :size="loadingSize ?? 20" />
    </template>
  </VanImage>
</template>
<style lang="scss"></style>
